<template>
  <div class="medicalPReport">
    <div class="medicalPReport-header">
      <el-card class="drug-head-contatiner-title2" shadow="never">
        <h2>定点救治医院工作信息日报表</h2>
        <el-form :inline="true" :model="formSearch" class="demo-form-inline">
          <!-- <el-form-item label="开始时间">
            <el-date-picker
              v-model="formSearch.startTime"
              type="datetime"
              placeholder="--请选择--"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="formSearch.endTime"
              type="datetime"
              placeholder="--请选择--"
            />
          </el-form-item>
          <el-form-item label="活动名称">
            <el-input v-model="formSearch.name" />
          </el-form-item> -->
          <el-form-item>
            <!-- <el-button type="primary" @click="onSubmit">搜索</el-button> -->
            <!-- <el-button type="primary" @click="onlyPrint">打印</el-button> -->
            <!-- <el-button @click="onReset">重置</el-button> -->
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="medicalPReport-list">
      <el-row>
        <el-col>
          <h2>一、接诊情况</h2>
          <el-table :data="table1" border stripe table-layout="auto">
            <el-table-column prop="Classfy" label="分类"></el-table-column>
            <el-table-column
              prop="VisitorNum"
              label="接诊人次"
            ></el-table-column>
            <el-table-column
              prop="TransfersNum"
              label="转住院人次"
            ></el-table-column>
            <el-table-column
              prop="CurrentInHospNum"
              label="目前住院人数"
            ></el-table-column>
          </el-table>
          <h2>二、人员情况</h2>
          <el-table :data="table2" border stripe table-layout="auto">
            <el-table-column prop="Classfy" label="分类"></el-table-column>
            <!-- <el-table-column
              prop="AthleteNOC"
              label="运动员和各国家（地区）奥委会NOC"
            ></el-table-column> -->
            <!-- <el-table-column
              prop="AthleteNOC"
              label="运动员和各国家（地区）奥委会NPC"
            ></el-table-column> -->
            <el-table-column
              prop="AthleteNOC"
              label="运动员和各国家(地区)残奥委会"
            ></el-table-column>
            <!-- <el-table-column
              prop="OCA"
              label="OCA大家庭和国际要人"
            ></el-table-column> -->
            <el-table-column
              prop="OCA"
              label="APC大家庭和国际要人"
            ></el-table-column>
            <el-table-column prop="InnerVIP" label="国内贵宾"></el-table-column>
            <el-table-column prop="IFsAFs" label="IFs/AFs"></el-table-column>
            <el-table-column
              prop="Redisseminator"
              label="媒体"
            ></el-table-column>
            <el-table-column
              prop="Redisseminator"
              label="转播商"
            ></el-table-column>
            <el-table-column prop="Audience" label="观众"></el-table-column>
            <el-table-column prop="Volunteer" label="志愿者"></el-table-column>
            <el-table-column prop="Worker" label="工作人员"></el-table-column>
            <el-table-column prop="Total" label="合计(例)"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <h2>三、分类统计（按伤情）</h2>
          <el-table :data="table3" border stripe table-layout="auto">
            <el-table-column prop="Classfy" label="分类"></el-table-column>
            <el-table-column
              prop="FractureInjury"
              label="骨折损伤"
            ></el-table-column>
            <el-table-column
              prop="JointInjury"
              label="关节损伤"
            ></el-table-column>
            <el-table-column
              prop="TendonLigamentInjury"
              label="肌腱韧带损伤"
            ></el-table-column>
            <el-table-column
              prop="SuperficialSkinInjury"
              label="皮肤浅表损伤"
            ></el-table-column>
            <el-table-column
              prop="CerebralSpinalInjury"
              label="脑神经脊髓损伤"
            ></el-table-column>
            <el-table-column
              prop="OralToothInjury"
              label="口腔牙齿损伤"
            ></el-table-column>
            <el-table-column
              prop="EyeInjury"
              label="眼部损伤"
            ></el-table-column>
            <el-table-column
              prop="OtolaryngologyInjury"
              label="耳鼻喉损伤"
            ></el-table-column>
            <el-table-column
              prop="MultipleInjuries"
              label="多发伤类"
            ></el-table-column>
            <el-table-column prop="Other" label="其它"></el-table-column>
            <el-table-column prop="Sum" label="合计(例)"></el-table-column>
          </el-table>
          <h2>四、分类统计（按疾病）</h2>
          <el-table :data="table4" border stripe table-layout="auto">
            <el-table-column prop="Classfy" label="分类"></el-table-column>
            <el-table-column
              prop="Cardiovascular"
              label="心血管"
            ></el-table-column>
            <el-table-column prop="Skin" label="皮肤"></el-table-column>
            <el-table-column prop="OralCavity" label="口腔"></el-table-column>
            <el-table-column
              prop="Endocrinology"
              label="内分泌"
            ></el-table-column>
            <el-table-column prop="Digests" label="消化"></el-table-column>
            <el-table-column
              prop="Urogenital"
              label="泌尿生殖"
            ></el-table-column>
            <el-table-column prop="Blood" label="血液"></el-table-column>
            <el-table-column
              prop="Musculoskeletal"
              label="肌肉骨骼"
            ></el-table-column>
            <el-table-column
              prop="NervousSystem"
              label="神经系统"
            ></el-table-column>
            <el-table-column prop="Eye" label="眼科"></el-table-column>
            <el-table-column prop="EarNose" label="耳鼻喉科"></el-table-column>
            <el-table-column prop="Spirit" label="精神"></el-table-column>
            <el-table-column prop="Breath" label="呼吸"></el-table-column>
            <el-table-column
              prop="TemperatureSys"
              label="温度调节系统"
            ></el-table-column>
            <el-table-column prop="" label="妇科"></el-table-column>
            <el-table-column prop="Other" label="其他"></el-table-column>
            <el-table-column prop="Other" label="合计"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint';
import { onMounted, reactive, ref } from 'vue';
import printData from '../injureReport/print-data';
import { useRoute } from 'vue-router';
import { getPanelData } from '@/network/report';

let route = useRoute();
let panel = reactive({});
/**
 * 自动连接 / 连接
 * cb: 连接回调， (status, msg) {
 *   // status: true/false
 *   // msg: status == true 时 返回socket.connect回调 e
 * }
 */
// let autoConnect = function (cb) {
//   console.log("autoConnect");
//   window.autoConnect = true;
//   window.hiwebSocket &&
//     window.hiwebSocket.hasIo() &&
//     window.hiwebSocket.start(cb);
// };

/**
 * 取消自动连接 / 断开连接
 */
let disAutoConnect = function () {
  console.log('disAutoConnect');
  window.autoConnect = false;
  window.hiwebSocket && window.hiwebSocket.hasIo() && window.hiwebSocket.stop();
};
let hiprintTemplate;
const table1 = ref([
  {
    Classfy: '当日合计',
    VisitorNum: '1',
    TransfersNum: '2',
    CurrentInHospNum: '3',
  },
  {
    Classfy: '累计',
    VisitorNum: '1',
    TransfersNum: '2',
    CurrentInHospNum: '3',
  },
]);
const onReset = () => {
  formSearch.startTime = '';
  formSearch.endTime = '';
  formSearch.name = '';
};
const table3 = ref([
  {
    Classfy: '当日合计',
    FractureInjury: '1',
    JointInjury: '2',
    TendonLigamentInjury: '3',
    SuperficialSkinInjury: '4',
    CerebralSpinalInjury: '5',
    OralToothInjury: '6',
    EyeInjury: '7',
    OtolaryngologyInjury: '8',
    MultipleInjuries: '9',
    Other: '10',
    Sum: '40',
  },
  {
    Classfy: '累计',
    FractureInjury: '11',
    JointInjury: '12',
    TendonLigamentInjury: '13',
    SuperficialSkinInjury: '14',
    CerebralSpinalInjury: '15',
    OralToothInjury: '16',
    EyeInjury: '17',
    OtolaryngologyInjury: '18',
    MultipleInjuries: '19',
    Other: '20',
    Sum: '21',
  },
]);
const table4 = ref([
  {
    Classfy: '当日合计',
    Cardiovascular: '1',
    Skin: '2',
    OralCavity: '3',
    Endocrinology: '4',
    Digests: '5',
    Urogenital: '6',
    Blood: '7',
    Musculoskeletal: '8',
    NervousSystem: '9',
    Eye: '10',
    EarNose: '40',
    Laryngology: '40',
    Spirit: '40',
    Breath: '40',
    TemperatureSys: '40',
    Gynecology: '40',
    Others: '40',
    Total: '40',
  },
  {
    Classfy: '当日合计',
    Cardiovascular: '1',
    Skin: '2',
    OralCavity: '3',
    Endocrinology: '4',
    Digests: '5',
    Urogenital: '6',
    Blood: '7',
    Musculoskeletal: '8',
    NervousSystem: '9',
    Eye: '10',
    EarNose: '40',
    Laryngology: '40',
    Spirit: '40',
    Breath: '40',
    TemperatureSys: '40',
    Gynecology: '40',
    Others: '40',
    Total: '40',
  },
]);
const table2 = ref([
  {
    Classfy: '当日合计',
    AthleteNOC: '1',
    OCA: '2',
    InnerVIP: '3',
    IFsAFs: '4',
    Redisseminator: '5',
    Audience: '6',
    Volunteer: '7',
    Worker: '8',
    Total: '9',
    Transfer: '10',
  },
  {
    Classfy: '当日合计',
    AthleteNOC: '1',
    OCA: '2',
    InnerVIP: '3',
    IFsAFs: '4',
    Redisseminator: '5',
    Audience: '6',
    Volunteer: '7',
    Worker: '8',
    Total: '9',
    Transfer: '10',
  },
]);
const init = async () => {
  // disAutoConnect();
  hiprint.init({
    providers: [new defaultElementTypeProvider()],
  });

  // 还原配置
  hiprint.setConfig();
  // 替换配置
  hiprint.setConfig({
    movingDistance: 2.5,
    text: {
      supportOptions: [
        {
          name: 'styler',
          hidden: true,
        },
        {
          name: 'formatter',
          hidden: true,
        },
      ],
    },
  });
  // // eslint-disable-next-line no-undef
  // hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));

  // console.log(hiprintTemplate);
  await getPanelData({ path: route.path }).then((data) => {
    panel = data;
    hiprintTemplate = new hiprint.PrintTemplate({
      template: JSON.parse(panel),
      settingContainer: '#PrintElementOptionSetting',
      paginationContainer: '.hiprint-printPagination',
    });
    hiprintTemplate.design('#hiprint-printTemplate');
  });
};
onMounted(init);
const formSearch = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  startTime: '',
  endTime: '',
  name: '',
});
const onlyPrint = () => {
  hiprintTemplate.print(
    // undefined,
    // panel,
    printData,
    {},
    {
      styleHandler: () => {
        let css =
          '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
        return css;
      },
    },
  );
};
</script>
<style lang="scss" scoped>
.medicalPReport {
  margin: 14px 15px 14px;
  .medicalPReport-header {
    .drug-head-contatiner-title2 {
      h2 {
        text-align: center;
        margin-bottom: 14px;
      }
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-top: 14px;
    }
  }
  .medicalPReport-list {
    margin-top: 14px;
    // width: 500px;
  }
}
// /*字体调黑*/
:deep(.el-table) {
  font-size: 16px;
  color: #000000;
  border: 1px solid #dcdfe6;
}

:deep(.el-table th) {
  font-weight: normal;
  font-size: 18px;
}

:deep(.el-table thead) {
  color: #000000;
}

// /*边框调黑*/
:deep(.el-table::before) {
  background-color: #000000;
}

:deep(.el-table--border::after) {
  background-color: #000000;
}

:deep(.el-table--border th),
:deep(.el-table--border td) {
  border: 1px solid #000000;
}

:deep(.el-table--group),
:deep(.el-table--border) {
  border-color: #000000;
}

:deep(.el-table th.is-leaf),
:deep(.el-table td) {
  border-bottom: 1px solid #000000;
}

// /*减小单元格间距*/
:deep(.el-table th),
:deep(.el-table td) {
  padding: 0 0;
}

// /*显示底部边框 估计打印时伪元素把border覆盖了 height设为0隐藏伪元素*/
:deep(.el-table::before) {
  height: 0;
}

// /*显示右边框*/
:deep(.el-table--group::after),
:deep(.el-table--border::after) {
  width: 1;
}
</style>
